<template>
  <div style="height: 100%;box-sizing: border-box;padding:0 25px;" class="backgroundColor">
    <Header content="矿池"></Header>
    <scroller
      :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
      :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
      lock-x
      height="-95"
      ref="pool"
      @on-pullup-loading="onScrollBottom()"
      :use-pullup="true"
      :use-pulldown="true"
      @on-pulldown-loading="onScrollTop()"
    >
      <div>
        <div>
          <img src="../assets/img/poolImg.png" alt="" style="width: 100%;">
        </div>
        <div style="position: relative;top: -50px;">
          <div v-for="item in list" class="flexBetween poolItem">
            <div class="flexLeft">
              <img src="../assets/img/poolImg.png" alt="" style="width:25px;">
              <div class="poolItemLine"></div>
              <div class="font16">2348.86958695</div>
            </div>
            <div class="font15">
              BTC
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<style>
  .poolItem{
    height: 45px;
    border-radius: 22px;
    border:1px solid #3A3A48;
    margin-bottom: 15px;
    padding: 0 22px;
  }
  .poolItemLine{
    height: 27px;
    border-left: 1px solid #3A3A48;
    margin:0 10px;
  }
</style>
<script>
import Header from './common/header.vue'
import {Scroller} from 'vux'
export default{
  data(){
    return {
      list:[1,2,3,4,5,6],
      onFetching1:false,
      onFetching:false,
    }
  },
  methods:{
    onScrollTop(){
      if (this.onFetching1) {
      } else {
        this.onFetching1 = true;
        this.recordList = [];
        this.List();
      }
    },
    onScrollBottom () {
      if (this.onFetching) {} else {
        this.onFetching = true;
        var that = this;
      }
    },
    List(){
      this.list = [1,2,3,4,5,6];
    }
  },
  created(){
    this.onScrollTop();
  },
  components:{
    Header,Scroller
  }
}
</script>
